---
// Reatom Landing Page - Refactored with Components
import HeroSection from '../components/landing/HeroSection.astro'
import FeaturesSection from '../components/landing/FeaturesSection.astro'
import HistorySection from '../components/landing/HistorySection.astro'
import FooterSection from '../components/landing/FooterSection.astro'
import CodeExample from '../components/landing/CodeExample.astro'
import FeedbackSection from '../components/landing/FeedbackSection.astro'
import ReplScript from '../components/ReplScript.astro'
---

<!doctype html>
<html lang="en" data-theme="none">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Reatom - State Managers for Any Kind of Apps</title>
    <meta
      name="description"
      content="Lightest and simplest at start, extremely feature-rich for growth. Modern state management for React, Vue, and more."
    />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />

    <!-- Preload fonts for better performance -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <header class="nav-header">
      <div class="nav-header-content">
        <div role="button" class="nav-header-logo">
          <svg width="48" height="48" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg" fill="#151134" stroke="#fff" stroke-width="15px">
            <circle cx="200" cy="200" r="200" fill="#fff" stroke-width="0"/>
            <circle cx="200" cy="200" r="175" stroke-width="0"/>
            <circle cx="180" cy="180" r="130"/>
            <circle cx="215" cy="180" r="70"/>
            <circle cx="150" cy="94" r="38"/>
            <circle cx="100" cy="195" r="40"/>
            <circle cx="165" cy="275" r="30"/>
            <circle cx="250" cy="265" r="20"/>
            <circle cx="57" cy="270" r="20"/>
            <circle cx="215" cy="345" r="36"/>
            <circle cx="310" cy="290" r="36"/>
            <circle cx="345" cy="195" r="30"/>
            <circle cx="321" cy="107" r="25"/>
            <circle cx="260" cy="50" r="20"/>
            <circle cx="120" cy="330" r="25"/>
          </svg>

          <span>Reatom</span>
        </div>

        <div class="nav-header-buttons">
          <a href="/start/base">Docs</a>
          <a href="https://github.com/reatom/reatom"
            target="_blank"
            rel="noopener noreferrer"
          >
            <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 496 512" class="fs_2xl" height="1.5rem" width="1.5rem" xmlns="http://www.w3.org/2000/svg">
              <path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path>
            </svg>
          </a>
          <!-- Theme Toggle Button -->
          <button 
            id="theme-toggle" 
            class="theme-toggle"
            aria-label="Toggle light/dark theme"
            title="Toggle theme"
          >
            <div class="toggle-icon">
              <svg class="sun-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <circle cx="12" cy="12" r="5"/>
                <path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/>
              </svg>
              <svg class="moon-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
              </svg>
            </div>
          </button>
        </div>
      </div>
    </header>

    <!-- SVG Filter Definition for Paper Night Sky Effect -->
    <svg width="0" height="0" style="position: absolute;">
      <defs>
        <filter id="filter">
          <feTurbulence type="fractalNoise" baseFrequency="0.04" numOctaves="5" stitchTiles="stitch" result="NOISE"></feTurbulence>
          <feDiffuseLighting lighting-color="var(--texture-filter-color)" surfaceScale="4" in="NOISE" result="DIFFUSE">
            <feDistantLight azimuth="150" elevation="140"></feDistantLight>
          </feDiffuseLighting>
        </filter>
      </defs>
    </svg>

    <!-- Background texture layer -->
    <!-- <div class="background-texture"></div> -->

    <HeroSection />
    <CodeExample />
    <FeaturesSection />
    <HistorySection />
    <FeedbackSection />
    <FooterSection />

    <style>
      /* CSS Custom Properties for Theming */
      :root {
        /* Dark theme (default) */
        --bg-primary: #0a0a0f;
        --bg-secondary: rgba(255, 255, 255, 0.05);
        --bg-tertiary: rgba(255, 255, 255, 0.05);
        --text-primary: #cccccc;
        --text-secondary: #e0e0e0;
        --text-muted: #999999;
        --accent-primary: #bca4e0;
        --accent-secondary: #463958;
        --accent-gradient: linear-gradient(135deg, #a3a1db, #8e8cc7);
        --border-color: rgba(220, 220, 220, 0.3);
        --shadow-color: rgba(133, 84, 255, 0.3);
        --texture-filter-color: #1B1B2A;
        --card-bg: rgba(255, 255, 255, 0.02);
        --card-border: rgba(255, 255, 255, 0.1);
        --overlay-bg: #0a0a0f;
        
        /* Feature colors */
        --signal-color: #4A90E2;
        --signal-secondary: #7BB3F0;
        --performance-color: #FFD700;
        --performance-secondary: #FFA500;
        --forms-color: #9B59B6;
        --forms-secondary: #C39BD3;
        --router-color: #E74C3C;
        --router-secondary: #F1948A;
        --framework-color: #2ECC71;
        --framework-secondary: #58D68D;
        --debug-color: #F39C12;
        --debug-secondary: #F7DC6F;
        --ecosystem-gradient: linear-gradient(45deg, #8E44AD, #3498DB, #E74C3C);
      }

      html {
        scroll-padding-top: 14rem;
      }

      html[data-theme="none"] {
        display: none
      }

      /* Light theme */
      html[data-theme="light"] {
        --bg-primary: #fdfdff;
        --bg-secondary: rgba(21, 17, 52, 0.03);
        --bg-tertiary: rgba(21, 17, 52, 0.05);
        --text-primary: #2c2c2c;
        --text-secondary: #1a1a1a;
        --text-muted: #666666;
        --accent-primary: #6563a3;
        --accent-secondary: #2f2f4b;
        --accent-gradient: linear-gradient(135deg, #6563a3, #716f9f);
        --border-color: rgba(21, 17, 52, 0.2);
        --shadow-color: rgba(21, 17, 52, 0.15);
        --texture-filter-color: #f8f9fa;
        --card-bg: rgba(236, 234, 255, 0.1);
        --card-border: rgba(21, 17, 52, 0.08);
        --overlay-bg: rgba(255, 255, 255, 0.95);
        
        /* Adjusted feature colors for light theme - darker blues */
        --signal-color: #1d4ed8;
        --signal-secondary: #2563eb;
        --performance-color: #e6a500;
        --performance-secondary: #d19a00;
        --forms-color: #7c3aed;
        --forms-secondary: #8b5cf6;
        --router-color: #dc2626;
        --router-secondary: #ef4444;
        --framework-color: #059669;
        --framework-secondary: #10b981;
        --debug-color: #ea580c;
        --debug-secondary: #f97316;
        --ecosystem-gradient: linear-gradient(45deg, #7c3aed, #2563eb, #dc2626);
      }

      .nav-header {
        position: sticky;
        top: 1rem;
        width: 100%;
        margin: auto;
        max-width: 79rem;
        padding: 0 2rem;
        z-index: 50;
      }

      .nav-header-content {
        height: 5rem;
        border-radius: 2.5rem;
        background: #00000020;
        border: 1px solid var(--card-border);
        backdrop-filter: blur(2rem);
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1rem;
      }

      html[data-theme="light"] .nav-header-content  {
        background: #ffffff20;
      }

      .nav-header-logo {
        display: flex;
        gap: 1rem;
        align-items: center;
        font-size: 1.2em;
        font-weight: 600;
        cursor: pointer;
      }

      html[data-theme="dark"] .nav-header-logo svg {
        stroke: currentColor;
      }

      html[data-theme="dark"] .nav-header-logo svg circle:first-child {
        fill: currentColor;
      }

      .nav-header-buttons {
        display: flex;
        gap: 1.5rem;
        align-items: center;
        line-height: 1;
      }

      .nav-header-buttons a {
        display: flex;
        text-decoration: none;
        color: var(--text-primary);
        transition: 0.3s all ease;
      }
      
      .nav-header-buttons a:hover {
        color: var(--accent-primary);
      }

      /* Theme Toggle Button */
      .theme-toggle {
        width: 2rem;
        height: 2rem;
        border: none;
        border-radius: 50%;
        background: var(--card-bg);
        backdrop-filter: blur(10px);
        border: 1px solid var(--border-color);
        cursor: pointer;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .theme-toggle:hover {
        background: var(--bg-tertiary);
        border-color: var(--border-color);
        transform: scale(1.05);
      }

      .toggle-icon {
        position: relative;
        width: 1.25rem;
        height: 1.25rem;
      }

      .sun-icon,
      .moon-icon {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        color: var(--text-primary);
        transition: all 0.3s ease;
      }

      /* Default state (dark theme) - show sun icon */
      .sun-icon {
        opacity: 1;
        transform: rotate(0deg) scale(1);
      }

      .moon-icon {
        opacity: 0;
        transform: rotate(180deg) scale(0.8);
      }

      /* Light theme - show moon icon */
      html[data-theme="light"] .sun-icon {
        opacity: 0;
        transform: rotate(-180deg) scale(0.8);
      }

      html[data-theme="light"] .moon-icon {
        opacity: 1;
        transform: rotate(0deg) scale(1);
      }

      /* Reset and Base Styles */
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      html {
        scroll-behavior: smooth;
      }

      body {
        font-family:
          'Inter',
          -apple-system,
          BlinkMacSystemFont,
          'Segoe UI',
          Roboto,
          sans-serif;
        line-height: 1.6;
        color: var(--text-primary);
        background: var(--bg-primary);
        overflow-x: hidden;
        position: relative;
        transition: background-color 0.3s ease, color 0.3s ease;
      }

      body::before {
        content: " ";
        position: absolute;
        inset: 0;
        --top-color: #32343b;
        background-image: 
          linear-gradient(to bottom, transparent 10rem, var(--bg-primary) 100vh 100%),
          url(/assets/noise.svg), 
          linear-gradient(to bottom, var(--top-color), transparent);
        opacity: 0.2;
      }

      html[data-theme="light"] body::before {
        opacity: 1;
        --top-color: #cbd0ee;
      }

      .background-texture {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--bg-primary);
        filter: url(#filter);
        z-index: -1;
        pointer-events: none;
        transition: background-color 0.3s ease;
      }

      /* Mobile responsive theme toggle */
      @media (max-width: 768px) {
        .theme-toggle {
          top: 1rem;
          right: 1rem;
          width: 2.5rem;
          height: 2.5rem;
        }

        .toggle-icon {
          width: 1.25rem;
          height: 1.25rem;
        }

        .nav-header {
          max-width: 77rem;
          padding: 0 1rem;
        }

        .nav-header-buttons {
          gap: 1rem;
        }
      }
    </style>

    <script>
      // Theme management
      function initTheme() {
        const themeToggle = document.getElementById('theme-toggle')
        const html = document.documentElement
        
        // Get saved theme or default to dark
        const savedTheme = localStorage.getItem('theme') || 'dark'
        html.setAttribute('data-theme', savedTheme)
        
        // Theme toggle handler
        themeToggle?.addEventListener('click', () => {
          const currentTheme = html.getAttribute('data-theme')
          const newTheme = currentTheme === 'light' ? 'dark' : 'light'
          
          html.setAttribute('data-theme', newTheme)
          localStorage.setItem('theme', newTheme)
          
          // Dispatch custom event for components that need to update
          window.dispatchEvent(new CustomEvent('themeChanged', { 
            detail: { theme: newTheme } 
          }))
        })
      }

      function initLogoScroller() {
        const logo = document.querySelector('.nav-header-logo')

        logo?.addEventListener('click', () => {
          document.documentElement.scroll({ top: 0 })
        })
      }

      // Smooth scroll for anchor links
      function initSmoothScroll() {
        // document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
        //   anchor.addEventListener('click', (e) => {
        //     e.preventDefault()
        //     const target = document.querySelector((anchor as HTMLAnchorElement).getAttribute('href') || '')
        //     if (target) {
        //       target.scrollIntoView({
        //         behavior: 'smooth',
        //         block: 'start',
        //       })
        //     }
        //   })
        // })
      }

      // Initialize everything
      document.addEventListener('DOMContentLoaded', () => {
        initTheme()
        initSmoothScroll()
        initLogoScroller()
      })
    </script>
    <ReplScript />
  </body>
</html>
